
<html>

<HEAD>

<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Class1";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Class2";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Class3";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Class4";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Class5";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Class6";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Class7";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Class8";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "Order1";
arrItemsGrp2[21] = 0
arrItems2[22] = "Order2";
arrItemsGrp2[22] = 0

arrItems2[31] = "Order3";
arrItemsGrp2[31] = 1
arrItems2[34] = "Order4";
arrItemsGrp2[34] = 1

arrItems2[35] = "Order5";
arrItemsGrp2[35] = 2

arrItems2[99] = "Order6";
arrItemsGrp2[99] = 5
arrItems2[100] = "Order7";
arrItemsGrp2[100] = 5
arrItems2[57] = "Order8";
arrItemsGrp2[57] = 5

arrItems2[101] = "Order9";
arrItemsGrp2[101] = 3
arrItems2[102] = "TOrder10";
arrItemsGrp2[102] = 3

arrItems2[103] = "Order11";
arrItemsGrp2[103] = 4
arrItems2[104] = "Order12";
arrItemsGrp2[104] = 4

arrItems2[105] = "Order13";
arrItemsGrp2[105] = 6
arrItems2[106] = "Order14";
arrItemsGrp2[106] = 6

arrItems2[200] = "Order15";
arrItemsGrp2[200] = 7
arrItems2[201] = "Order16";
arrItemsGrp2[201] = 7
arrItems2[203] = "Order17";
arrItemsGrp2[203] = 7


var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[31] = "Genera1";
arrItemsGrp3[31] = 103
arrItems3[32] = "Genera2";
arrItemsGrp3[32] = 103

arrItems3[33] = "Genera3";
arrItemsGrp3[33] = 21
arrItems3[34] = "Genera4";
arrItemsGrp3[34] = 21

arrItems3[35] = "Genera5";
arrItemsGrp3[35] = 22

arrItems3[99] = "Genera6";
arrItemsGrp3[99] = 31
arrItems3[100] = "Genera7";
arrItemsGrp3[100] = 31
arrItems3[57] = "Genera8";
arrItemsGrp3[57] = 31





/* function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
  // controlToPopulate.add(myEle) ;
  controlToPopulate.appendChild(myEle)
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute('value',x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}*/

 function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
  }
  // ADD Default Choice - in case there are no values
  myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","-1");
  controlToPopulate.appendChild(myEle);
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute("value",x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}
// -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<form name=form>
<table align="center">
  <tr>
    <td>
      <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
        <option value="0" selected>[SELECT]</option>
        <option value="1">Phylum1</option>
        <option value="2">Phylum2</option>
        <option value="3">Phylum3</option>
      </select>
    </td><td>
      <select id="secondChoice" name="secondChoice" multiple size="5" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
      </select>
      <select id="thirdChoice" name="thirdChoice" multiple size="5" onchange="selectChange(this, form.fourChoice, arrItems3, arrItemsGrp3);">
      </select>
      
      <select id="fourChoice" name="fourChoice" multiple size="5">
      </select>
    </td>
  </tr>
</table>
</form>



</html>